import type { JSX } from 'vue/jsx-runtime'
import type { DescriptionProps as DescriptionPropsEle } from 'element-plus'
import type { Recordable } from '@/types/global'
import type { VNode } from 'vue'

export interface DescriptionProps extends DescriptionPropsEle {
  // 配置
  schema?: DescItem[]
  //数据
  data?: Recordable
  // 是否显示冒号
  colon?: boolean
  slotTitle?: string //自定义标题，显示在左上方
  renderTitle?: (() => any) | VNode | VNode[] | string //自定义标题，显示在左上方
  slotExtra?: string //自定义操作区，显示在右上方
  renderExtra?: (() => any) | VNode | VNode[] | string //自定义操作区，显示在右上方
  imageClass?: string //类型为图片时 图片class
}
export interface DescItem {
  // 标签
  label?: string
  // 字段
  field?: string
  factor?: any //额外参数  如：字典类型(string)
  show?: boolean | ((data: Recordable) => boolean) //动态判断当前组件是否显示，css 控制，不会删除 dom
  span?: number //列的数量
  rowspan?: number //单元格应该跨越的行数
  width?: string | number //列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）
  minWidth?: string | number //列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）
  labelWidth?: string | number //列标签宽，如果未设置，它将与列宽度相同。 比 Descriptions 的 label-width 优先级高
  align?: 'left' | 'center' | 'right' //列的内容对齐方式（如无 border，对标签和内容均生效）
  labelAlign?: 'left' | 'center' | 'right' //列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）
  className?: string //列的内容自定义类名
  labelClassName?: string //column label custom class name
  // 是否显示冒号
  colon?: boolean
  slotLabel?: string //自定义 label，渲染组件
  renderLabel?: ((val: any, data: Recordable) => any) | VNode | VNode[] | string //自定义渲染label组件
  //自定义渲染field
  render?:
    | boolean
    | ((
        val: any,
        data: Recordable,
      ) => VNode | undefined | JSX.Element | Element | string | number | object)
  slot?: string //自定义 slot，渲染field
  type?: 'image' | 'imageArr' | 'pdf' | 'dict' | 'auto' //image图片 imageArr图片数组  pdf  dict字典  auto根据文件名称识别文件类型
  imageClass?: string //类型为图片时 图片class
  pdfConfig?: pdfConfig
}
// pdf配置
export type pdfConfig = {
  fileName?: string //文件名称
  path?: string //文件路径
  //按钮布局和显示那些按钮
  layout?: ('download' | 'print' | 'view')[] //按钮布局
  pdfIcon?: string //pdf图标
  downIcon?: string //下载图标
  printIcon?: string //打印图标
  viewIcon?: string //预览图标
  fileNameWidth?: string //文字宽度
  pdfColor?: string //pdf图标颜色
}

export interface DescriptionActionType {
  setProps: (formProps: Partial<DescriptionProps>) => Promise<void>
}
export type RegisterFn = (descrInstance: DescriptionActionType) => void
export type UseDescriptionType = [RegisterFn, DescriptionActionType]
